<template>
 <div class="scroll">

      
      <VueBetterScroll class="wrapper"
                         ref="scroll"
                         :scrollbar="scrollbarObj"
                         :listenBeforeScroll="listenBeforeScroll"
                  
                         :pullUpLoad="pullUpLoadObj"
                         :startY="parseInt(startY)"
                         @pulling-down="onPullingDown"
                         @pulling-up="onPullingUp">
                        
        <ul class="list-content">
         
         <li class="list-item"  >
         
         </li>
        </ul>
      </VueBetterScroll>

 </div>
</template>
<script>
import VueBetterScroll from 'vue2-better-scroll'
export default {
  data() {
    return {
      key: 1,
           // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
        scrollbarObj: {
          fade: true
          },
        listenBeforeScroll: true,
        // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
        // pullDownRefreshObj: {
        //   threshold: 90,
        //   stop: 40
        // },
        // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
        pullUpLoadObj: {
          threshold: 0,
          txt: {
            more: '加载更多',
            noMore: '没有更多数据了'
          }
        },
        startY: 0, // 纵轴方向初始化位置
        scrollToX: 0,
        scrollToY: 0,
        scrollToTime: 700,
        items: [
          
        ],
        count:0
    };
  },
  components: {
    VueBetterScroll
  },
  beforeCreate: function() {
    // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

    debugger;
  },
  
  created: function() {
    // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

   
  },
  beforeMount: function() {},
  mounted() {
      this.onPullingDown()
  },
  methods: {
    // 在挂载开始之前被调用：相关的 render 函数首次被调用。

 
        // 滚动到页面顶部
      scrollTo() {
        this.$refs.scroll.scrollTo(this.scrollToX, this.scrollToY, this.scrollToTime)
      },
      // 模拟数据请求
      getData() {
        return new Promise(resolve => {
          const THIS = this;
          setTimeout(() => {
            const arr = []
            for (let i = 0; i < 10; i++) {
              arr.push(THIS.count++)
            }
            resolve(arr)
          }, 1000)
        })
      },
      onPullingDown() {
        // 模拟下拉刷新
        console.log('下拉刷新')
        this.count = 0
        this.getData().then(res => {
          this.items = res
          this.$refs.scroll.forceUpdate(true)
        })
      },
      onPullingUp() {
        // 模拟上拉 加载更多数据
        console.log('上拉加载')
         const THIS = this;
        this.getData().then(res => {
          this.items = this.items.concat(res)
          if (THIS.count < 30) {
            this.$refs.scroll.forceUpdate(true)
          } else {
            this.$refs.scroll.forceUpdate(false)
          }
        })
      }
  }
};
</script>

<style  scope>
h1{
  font-size: 20px;
  
}

 .scroll {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: aliceblue;
    height: 5rem;
  }
  .wrapper {
    background-color: aqua;
  }
</style>